import { useEffect, useRef, useState } from "react";
import { Swiper, SwiperSlide, SwiperClass } from "swiper/react";
import { Modal } from "antd";
import "swiper/less";
import "swiper/less/navigation";
import "swiper/less/pagination";
import "swiper/less/zoom";
import { Navigation, Pagination, Mousewheel, Keyboard } from "swiper/modules";
import { FileModel } from "../common/model";
import styles from "./index.module.less";
import { CloseOutlined } from "@ant-design/icons";
import { clsx } from "../common/utils";

export const PreviewImage: React.FC<{
  open: boolean;
  images: FileModel[];
  onClose: () => void;
  initIndex?: number; // 初始化索引
}> = (props) => {
  const { onClose, images, open, initIndex = 0 } = props;
  const swiperRef = useRef<SwiperClass>();
  const [activeIndex, setActiveIndex] = useState(initIndex);

  useEffect(() => {
    setActiveIndex(initIndex);
  }, [open]);

  return (
    <>
      <Modal
        open={open}
        centered
        destroyOnClose
        footer={null}
        closable={false}
        maskTransitionName=""
        transitionName="ant-fade"
        width={"100%"}
        onCancel={onClose}
        rootClassName={styles.PreviewImage}
        className={"select-none h-full max-w-full group"}
      >
        <Swiper
          modules={[Navigation, Pagination, Mousewheel, Keyboard]}
          onSwiper={(swiper) => {
            swiper.activeIndex = initIndex;
            swiperRef.current = swiper;
          }}
          onSlideChange={(swiper) => {
            setActiveIndex(swiper.activeIndex);
          }}
          navigation
          pagination={{
            clickable: true,
            bulletActiveClass: "!bg-white !opacity-90",
          }}
          // loop
          keyboard //键盘控制切换
          mousewheel //鼠标滚动
          cssMode
          resizeObserver //检测容器大小调整，而不是window
          observeSlideChildren
          observeParents
        >
          {images.map((item) => (
            <SwiperSlide
              key={item.uid}
              className="!flex justify-center items-center overflow-hidden"
              style={{
                height: window.innerHeight,
                // safari 浏览器 100vh问题
              }}
            >
              <img
                className="max-w-full max-h-full"
                src={item.url}
                loading="lazy"
                decoding="async"
                alt=""
              />
            </SwiperSlide>
          ))}
        </Swiper>
        {images.length > 1 && (
          <div
            className={clsx(
              "absolute top-20 right-5 z-10 bg-grey text-font2",
              "rounded-2xl w-12 text-center py-[2px]",
              "group-hover:opacity-100 opacity-0 transition-opacity"
            )}
          >
            {activeIndex + 1}/{images.length}
          </div>
        )}
        <div
          className={clsx(
            "shadow-md absolute top-5 right-5 z-10 bg-white/50 cursor-pointer",
            "w-12 h-12 rounded-full flex items-center justify-center",
            "group-hover:opacity-100 opacity-0 transition-opacity"
          )}
          onClick={onClose}
        >
          <CloseOutlined className="text-xl text-font2" />
        </div>
      </Modal>
    </>
  );
};
